<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="/common/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/common/css/cupertino/jquery-ui-1.8.16.custom.css" />
 
<script src="/common/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="/common/js/grid.locale-cn.js" type="text/javascript"></script>
<script src="/common/js/jquery.jqGrid.min.js" type="text/javascript"></script>
 

	<script src="/common/js/ui/jquery-ui-1.8.16.custom.js"></script>
	 <script>
	$(function() {
		$( "input" ).button();
		
	});
	</script>
	
 <style type="text/css">
html, body {
    font-size: 85%;
}
</style>
 
<script type="text/javascript">
$(function(){ 
  $("#list").jqGrid({
    url:'/app/sys/comp4select/compselect!list4test',
    editurl:'/app/sys/comp4select/compselect!list4test',
    datatype: 'json',
    mtype: 'get',
    colNames:['Name','Gender', 'Age'],
    colModel :[ 
      {name:'name', index:'name',editable:true, width:155}, 
      {name:'gender', index:'gender', editable:true,width:190}, 
      {name:'age', index:'age', width:180,editable:true, align:'right',sortable:false}
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'name',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'My first grid'
  }); 

  jQuery("#list").jqGrid('navGrid','#pager', {view:true,edit:true,add:true,del:true,search:true});


}); 


</script>
 
</head>
<body>
<table id="list"><tr><td/></tr></table> 
<div id="pager"></div> 

<input type="submit" value="A submit button" style="display:none"/>
</body>
</html>